<template>
    <v-snackbar v-model="value" :timeout="timeout" style="user-select: none">
        {{ message }}
        <template v-slot:actions v-if="closeable">
            <v-btn color="blue" variant="text" @click="value = false">关闭</v-btn>
        </template>
    </v-snackbar>
</template>

<script setup lang="ts">
import { computed } from "vue";

const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false,
    },
    message: {
        type: String,
        default: "",
    },
    timeout: {
        type: Number,
        default: 3000,
    },
    closeable: {
        type: Boolean,
        default: true,
    },
});

const emits = defineEmits<{
    (event: "update:modelValue", value: boolean): void;
}>();

const value = computed({
    get() {
        return props.modelValue;
    },
    set(value) {
        emits("update:modelValue", value);
    },
});
</script>
